<template>
    <div class="oaoModeProcessing">
        <div class="container">
            <div class="headerBox">
                <van-nav-bar title="产品详情">
                    <template #left>
                        <div class="headerLeftBtn">
                            <van-icon @click="$router.push('/category')" size=".48rem" color="#000000" name="arrow-left" />
                            <van-icon @click="$router.push('/category')" size=".48rem" color="#000000" name="cross" style="margin-left: .15rem;" />  
                        </div>
                    </template>
                </van-nav-bar>
            </div>
            <div class="bannerBox">
                <div class="imgBox">
                    <img src="@/assets/images/img2.png" alt="">
                </div>
            </div>
            <div class="buttons">
                <van-button round block type="info">立即预约</van-button>
                <van-button round block type="default">收藏</van-button>
            </div>
            <div class="content">
                <img src="@/assets/images/img4.png" alt="">
            </div>
        </div>
        <div class="footer" @click="appointmentProcessing">预约办理</div>
        <van-action-sheet v-model="showFlag" title="产品预约">
            <div class="content">
                <van-form>
                    <van-field v-model="queryForm.name" name="姓名" label="姓名" placeholder="请输入"/>
                    <van-field v-model="queryForm.username" name="手机号" label="手机号" placeholder="请输入"/>
                    <van-field v-model="queryForm.email" name="邮箱" label="邮箱" placeholder="请输入"/>
                    <van-field v-model="queryForm.phone" name="企业名称" label="企业名称" placeholder="请输入"/>
                    <van-field v-model="queryForm.address" name="picker" label="所在省份" clickable is-link readonly placeholder="请输入" @click="queryForm.addressFlag = true"/>
                    <van-popup v-model="queryForm.addressFlag" position="bottom">
                        <van-area
                        :area-list="areaList"
                        @confirm="onConfirmpAddressFlag"
                        @cancel="queryForm.addressFlag = false"
                        />
                    </van-popup>
                    <van-field v-model="queryForm.detailAddress" name="详细地址" label="详细地址" placeholder="请输入"/>
                    <van-field v-model="queryForm.describe" name="需求描述" label="需求描述" placeholder="请输入"/>
                    <van-field v-model="queryForm.code" maxlength="6" name="短信验证码" label="短信验证码" placeholder="请输入">
                        <template #button>
                            <van-button v-if="showFlagCode" plain size="small" type="info" @click="sendCode">发送验证码</van-button>
                            <van-count-down v-else :time="time" format="ss" @finish="finish">
                                <template #default="timeData">
                                <span class="block">{{ timeData.seconds }}s</span>
                                </template>
                            </van-count-down>
                        </template>
                    </van-field>
                </van-form>
                <div class="finishBtn" @click="handleFinish">完成</div>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
import { areaList } from '@vant/area-data';
export default {
    name: 'oaoModeProcessing',
    data() {
        return {
            areaList,
            showFlagCode: true,
            time: 60 * 1000,
            showFlag: false,
            queryForm: {
                addressFlag: false,
                name: '戴永名',
                username: '17601069732',
                email: 'daiyongming@richinfo.cn',
                phone: '彩讯科技股份有限公司',
                address: '北京/市辖区/朝阳区',
                detailAddress: '复兴国际中心',
            }
        }
    },
    methods: {
        sendCode() {
            this.showFlagCode = false
        },
        finish() {
            this.showFlagCode = true
            this.time = 60 * 1000
        },
        appointmentProcessing() {
            this.showFlag = true
        },
        onConfirmpAddressFlag(values) {
            this.queryForm.address = values
                .filter((item) => !!item)
                .map((item) => item.name)
                .join('/');
            this.queryForm.addressFlag = false
        },
        handleFinish() {
            this.$toast.success("预约商品已提交")
            this.$router.push('/home')
        }
    },
}
</script>
<style lang="less" scoped>
.oaoModeProcessing {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .container {
        flex: 1;
        overflow: auto;
        .bannerBox {
            height: 4.83rem;
            position: relative;
            .imgBox {
                img {
                    width: 100%;
                    display: block;
                }
            }
        }
        .content {
            width: 100%;
            img {
                width: 100%;
            }
        }
        .buttons {
            margin-top: .3rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 .2rem;
            button {
                width: 3.14rem;
                height: .8rem;
                border-radius: 0.2rem;
                font-size: 0.32rem;
                &:last-child {
                    background: #E9F4FF;
                    color: #2892FF;
                    border: 0 !important;
                }
            }
        }
    }
}
.footer {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    background: #2892FF;
    font-weight: normal;
    font-size: 0.34rem;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
}
.finishBtn {
    margin: .4rem;
    width: 6.7rem;
    height: 1rem;
    background: #2892FF;
    border-radius: 0.2rem;
    font-weight: normal;
    font-size: 0.34rem;
    color: #FFFFFF;
    line-height: 1rem;
    text-align: center;
    font-style: normal;
}
</style>